<template>
	<wsPage title="商户资金流水">
		<div slot="page_operate">
			<Button  @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="商户名称">
						<Input v-model="queryForm.tenantName" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="收支类型">
						<Select clearable v-model="queryForm.type" placeholder="请选择" class="ws-form-select">
							<Option value="1">收入</Option>
							<Option value="2">支出</Option>
						</Select>
					</FormItem>
					<FormItem label="流水类型">
						<Select clearable v-model="queryForm.flowType" placeholder="请选择" class="ws-form-select">
							<Option value="1">收款</Option>
							<Option value="2">提现</Option>
							<Option value="3">退款</Option>
						</Select>
					</FormItem>
					<FormItem label="时间区间">
						<Row>
							<Col span="11">
							<FormItem>
								<DatePicker type="date" placeholder="查询开始时间" v-model="queryForm.searchStartTime" @on-change="dateConfirm"></DatePicker>
							</FormItem>
							</Col>
							<Col span="2" style="text-align: center">-</Col>
							<Col span="11">
							<FormItem>
								<DatePicker type="date" placeholder="查询结束时间" v-model="queryForm.searchEndTime" @on-change="dateConfirm"></DatePicker>
							</FormItem>
							</Col>
						</Row>
					</FormItem>
				</Form>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data"></Table>
			</div>
		</wsSmPanel>

	</wsPage>
</template>

<script>
	export default {
		data() {
			return {
				queryForm: {
					type: '',
					flowType: '',
					tenantName: '',
					searchStartTime: '',
					searchEndTime: ''
				},
				table: {
					columns: [{
							title: '商户名称',
							key: 'tenantName',
							width: 250,
							align: 'center'
						},
						{
							title: '流水号',
							key: 'sn',
							width: 220,
							align: 'center'
						},
						{
							title: '收支类型',
							key: 'type',
							width: 150,
							align: 'center',
							render: (h, params) => {
								return h('span', {

								}, params.row.type == 1 ? "收入" : "支出")
							}
						},
						{
							title: '流水类型',
							key: 'flowType',
							width: 150,
							align: 'center',
							render: (h, params) => {
								return h('span', {

								}, this.checkFlowType(params.row.flowType))
							}
						},
						{
							title: '流水金额',
							key: 'flowAmount',
							width: 180,
							align: 'center'
						},
						{
							title: '手续费',
							key: 'handlingCharge',
							width: 180,
							align: 'center'
						},
						{
							title: '服务费',
							key: 'serviceCharge',
							width: 180,
							align: 'center'
						},
						{
							title: '余额',
							key: 'balance',
							width: 180,
							align: 'center'
						},
						{
							title: '创建日期',
							key: 'createDate',
							width: 200,
							align: 'center'
						}
					],

					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				}
			}
		},

		computed: {

		},
		mounted() {
			this.init();
		},
		methods: {
			/**
			 * 判断流水类型
			 */
			checkFlowType(flowType) {
				if(flowType == 1) return '收款';
				if(flowType == 2) return '提现';
				if(flowType == 3) return '退款';
			},

			//查询开始时间段必填
			dateConfirm() {
				let searchStartTime = this.queryForm.searchStartTime;
				let searchEndTime = this.queryForm.searchEndTime;
				if(searchStartTime != null || searchStartTime != '') {
					searchEndTime = new Date();
				} else if(searchEndTime != null || searchEndTime != '') {
					searchStartTime = searchEndTime;
				}
			},

			init() {
				this.query();
			},
			//刷新
			refresh() {
				this.queryForm.type = '';
				this.queryForm.flowType = '';
				this.queryForm.tenantName = '';
				this.queryForm.searchStartTime = '';
				this.queryForm.searchEndTime = '';
				this.table.page.pageNum = 1;
				this.init();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ops/merchantAccountRecords?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			}
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>